<template>
    <div class="app-container dark-mode">
      <el-card shadow="hover" class="dashboard-card">
        <div slot="header" class="clearfix">
          <span class="card-title">每日能源消耗报表</span>
          <div style="float: right;">
            <el-button
              style="margin-left: 10px;"
              type="primary"
              size="small"
              @click="handleDownload"
              icon="el-icon-download"
            >
              下载报表
            </el-button>
            <el-button
              style="margin-left: 10px;"
              type="success"
              size="small"
              @click="handleUpload"
              icon="el-icon-upload"
              :loading="uploading"
            >
              提交数据
            </el-button>
            <el-button
              style="margin-left: 10px; padding: 3px 0"
              type="text"
              @click="handleEdit"
              icon="el-icon-edit"
            >
              {{ editing ? '保存' : '修改' }}
            </el-button>
          </div>
        </div>
  
        <el-row :gutter="20">
          <!-- 筛选条件 -->
          <el-col :span="24">
            <el-form :model="queryParams" label-position="top" class="filter-form">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="项目">
                    <el-select v-model="queryParams.project" placeholder="请选择项目" clearable>
                      <el-option
                        v-for="item in projectOptions"
                        :key="item"
                        :label="item"
                        :value="item"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="公司">
                    <el-select v-model="queryParams.company" placeholder="请选择公司" clearable>
                      <el-option
                        v-for="item in companyOptions"
                        :key="item"
                        :label="item"
                        :value="item"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="日期范围">
                    <el-date-picker
                      v-model="queryParams.dateRange"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item>
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button @click="resetQuery">重置</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
  
          <!-- 数据概览 -->
          <el-col :span="24">
            <el-row :gutter="20" class="summary-row">
              <el-col :span="6">
                <div class="summary-card">
                  <div class="summary-title">总气耗量 (m³)</div>
                  <div class="summary-value">{{ currentData.累计气耗量 | toFixed(2) }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="summary-card">
                  <div class="summary-title">总水耗量 (m³)</div>
                  <div class="summary-value">{{ currentData.累计水耗量 | toFixed(2) }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="summary-card">
                  <div class="summary-title">平均室外温度 (°C)</div>
                  <div class="summary-value">{{ currentData.室外温度 | toFixed(1) }}</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="summary-card">
                  <div class="summary-title">总面积 (m²)</div>
                  <div class="summary-value">{{ currentData.面积 }}</div>
                </div>
              </el-col>
            </el-row>
          </el-col>
  
          <!-- 图表区域 -->
          <el-col :span="24">
            <el-row :gutter="20" style="margin-top: 20px;">
              <el-col :span="12">
                <div class="chart-container">
                  <div class="chart-title">每日气耗量趋势</div>
                  <div ref="gasChart" style="width: 100%; height: 300px;"></div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="chart-container">
                  <div class="chart-title">每日水耗量趋势</div>
                  <div ref="waterChart" style="width: 100%; height: 300px;"></div>
                </div>
              </el-col>
            </el-row>
          </el-col>
  
          <!-- 数据表格 -->
          <el-col :span="24" style="margin-top: 20px;">
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              class="dark-table"
              v-loading="loading"
            >
              <el-table-column prop="日期" label="日期" width="120" />
              <el-table-column prop="项目" label="项目" width="120" />
              <el-table-column prop="公司" label="公司" width="120" />
              <el-table-column prop="面积" label="面积 (m²)" width="100" />
              <el-table-column prop="日气耗量" label="日气耗量 (m³)" width="120">
                <template slot-scope="scope">
                  <span v-if="!editing">{{ scope.row.日气耗量 | toFixed(2) }}</span>
                  <el-input-number
                    v-else
                    v-model="scope.row.日气耗量"
                    :precision="2"
                    :step="0.1"
                    :min="0"
                    size="small"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="累计气耗量" label="累计气耗量 (m³)" width="140">
                <template slot-scope="scope">
                  {{ scope.row.累计气耗量 | toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column prop="日水耗量" label="日水耗量 (m³)" width="120">
                <template slot-scope="scope">
                  <span v-if="!editing">{{ scope.row.日水耗量 | toFixed(2) }}</span>
                  <el-input-number
                    v-else
                    v-model="scope.row.日水耗量"
                    :precision="2"
                    :step="0.1"
                    :min="0"
                    size="small"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="累计水耗量" label="累计水耗量 (m³)" width="140">
                <template slot-scope="scope">
                  {{ scope.row.累计水耗量 | toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column prop="室外温度" label="室外温度 (°C)" width="120">
                <template slot-scope="scope">
                  <span v-if="!editing">{{ scope.row.室外温度 | toFixed(1) }}</span>
                  <el-input-number
                    v-else
                    v-model="scope.row.室外温度"
                    :precision="1"
                    :step="0.1"
                    size="small"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    name: 'EnergyDailyReport',
    filters: {
      toFixed(value, digits = 2) {
        return value ? Number(value).toFixed(digits) : '0.00';
      }
    },
    data() {
      return {
        uploading: false,
        // 查询参数
        queryParams: {
          project: '',
          company: '',
          dateRange: []
        },
        // 模拟数据
        tableData: [
          {
            日期: '2025-01-01',
            面积: 2863,
            日气耗量: 50.48,
            累计气耗量: 50.48,
            日水耗量: 48.24,
            累计水耗量: 48.24,
            室外温度: 5.2,
            项目: '项目1',
            公司: '公司A',
            集团: '集团A'
          },
          {
            日期: '2025-01-02',
            面积: 4045,
            日气耗量: 187.29,
            累计气耗量: 237.77,
            日水耗量: 96.27,
            累计水耗量: 144.51,
            室外温度: -2.4,
            项目: '项目2',
            公司: '公司A',
            集团: '集团A'
          },
          {
            日期: '2025-01-03',
            面积: 3200,
            日气耗量: 120.35,
            累计气耗量: 358.12,
            日水耗量: 75.18,
            累计水耗量: 219.69,
            室外温度: 1.8,
            项目: '项目1',
            公司: '公司B',
            集团: '集团B'
          },
          {
            日期: '2025-01-04',
            面积: 4500,
            日气耗量: 210.42,
            累计气耗量: 568.54,
            日水耗量: 105.67,
            累计水耗量: 325.36,
            室外温度: -1.2,
            项目: '项目3',
            公司: '公司C',
            集团: '集团A'
          },
          {
            日期: '2025-01-05',
            面积: 3800,
            日气耗量: 150.78,
            累计气耗量: 719.32,
            日水耗量: 85.92,
            累计水耗量: 411.28,
            室外温度: 3.5,
            项目: '项目2',
            公司: '公司B',
            集团: '集团B'
          }
        ],
        // 当前显示的数据
        currentData: {},
        // 编辑状态
        editing: false,
        // 加载状态
        loading: false,
        // 下拉选项
        projectOptions: ['项目1', '项目2', '项目3'],
        companyOptions: ['公司A', '公司B', '公司C'],
        // 图表实例
        gasChart: null,
        waterChart: null
      };
    },
    created() {
      this.initData();
    },
    mounted() {
      this.initCharts();
      window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleResize);
      if (this.gasChart) {
        this.gasChart.dispose();
      }
      if (this.waterChart) {
        this.waterChart.dispose();
      }
    },
    methods: {
        handleUpload() {
            this.uploading = true;
            // 模拟上传延迟
            setTimeout(() => {
                this.uploading = false;
                this.$message.success('数据上传成功');
            }, 1000);
        },
        handleDownload() {
            // 假设文件放在public/download目录下
            const fileUrl = '/download.pdf';
            const link = document.createElement('a');
            link.href = fileUrl;
            link.download = '能源消耗报表.pdf';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            this.$message.success('报表下载开始');
        },
      // 初始化数据
      initData() {
        this.currentData = this.tableData[this.tableData.length - 1];
      },
      // 初始化图表
      initCharts() {
        this.gasChart = echarts.init(this.$refs.gasChart);
        this.waterChart = echarts.init(this.$refs.waterChart);
        
        this.updateCharts();
      },
      // 更新图表
      updateCharts() {
        const dates = this.tableData.map(item => item.日期);
        const gasData = this.tableData.map(item => item.日气耗量);
        const waterData = this.tableData.map(item => item.日水耗量);
        const tempData = this.tableData.map(item => item.室外温度);
  
        // 气耗量图表配置
        const gasOption = {
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['日气耗量', '室外温度'],
            textStyle: {
              color: '#ccc'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: dates,
            axisLine: {
              lineStyle: {
                color: '#666'
              }
            },
            axisLabel: {
              color: '#999'
            }
          },
          yAxis: [
            {
              type: 'value',
              name: '气耗量 (m³)',
              axisLine: {
                lineStyle: {
                  color: '#666'
                }
              },
              axisLabel: {
                color: '#999',
                formatter: '{value}'
              },
              splitLine: {
                lineStyle: {
                  color: '#333'
                }
              }
            },
            {
              type: 'value',
              name: '温度 (°C)',
              axisLine: {
                lineStyle: {
                  color: '#666'
                }
              },
              axisLabel: {
                color: '#999',
                formatter: '{value}'
              },
              splitLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '日气耗量',
              type: 'bar',
              data: gasData,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' }
                ])
              }
            },
            {
              name: '室外温度',
              type: 'line',
              yAxisIndex: 1,
              data: tempData,
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                color: '#ff9800'
              },
              lineStyle: {
                width: 3
              }
            }
          ]
        };
  
        // 水耗量图表配置
        const waterOption = {
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['日水耗量'],
            textStyle: {
              color: '#ccc'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: dates,
            axisLine: {
              lineStyle: {
                color: '#666'
              }
            },
            axisLabel: {
              color: '#999'
            }
          },
          yAxis: {
            type: 'value',
            name: '水耗量 (m³)',
            axisLine: {
              lineStyle: {
                color: '#666'
              }
            },
            axisLabel: {
              color: '#999',
              formatter: '{value}'
            },
            splitLine: {
              lineStyle: {
                color: '#333'
              }
            }
          },
          series: [
            {
              name: '日水耗量',
              type: 'bar',
              data: waterData,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#81d4fa' },
                  { offset: 0.5, color: '#03a9f4' },
                  { offset: 1, color: '#03a9f4' }
                ])
              }
            }
          ]
        };
  
        this.gasChart.setOption(gasOption);
        this.waterChart.setOption(waterOption);
      },
      // 窗口大小变化时重绘图表
      handleResize() {
        if (this.gasChart) {
          this.gasChart.resize();
        }
        if (this.waterChart) {
          this.waterChart.resize();
        }
      },
      // 查询数据
      handleQuery() {
        this.loading = true;
        // 模拟查询延迟
        setTimeout(() => {
          // 这里应该是实际的后端查询逻辑
          // 现在只是模拟数据过滤
          let filteredData = [...this.tableData];
          
          if (this.queryParams.project) {
            filteredData = filteredData.filter(item => item.项目 === this.queryParams.project);
          }
          
          if (this.queryParams.company) {
            filteredData = filteredData.filter(item => item.公司 === this.queryParams.company);
          }
          
          if (this.queryParams.dateRange && this.queryParams.dateRange.length === 2) {
            const [start, end] = this.queryParams.dateRange;
            filteredData = filteredData.filter(item => {
              return item.日期 >= start && item.日期 <= end;
            });
          }
          
          this.tableData = filteredData;
          if (this.tableData.length > 0) {
            this.currentData = this.tableData[this.tableData.length - 1];
          }
          this.updateCharts();
          this.loading = false;
        }, 500);
      },
      // 重置查询
      resetQuery() {
        this.queryParams = {
          project: '',
          company: '',
          dateRange: []
        };
        this.handleQuery();
      },
      // 编辑/保存
      handleEdit() {
        if (this.editing) {
          // 保存逻辑
          this.$message.success('数据保存成功');
          // 重新计算累计值
          this.recalculateTotals();
        }
        this.editing = !this.editing;
      },
      // 重新计算累计值
      recalculateTotals() {
        let totalGas = 0;
        let totalWater = 0;
        
        this.tableData.forEach(item => {
          totalGas += item.日气耗量;
          totalWater += item.日水耗量;
          item.累计气耗量 = totalGas;
          item.累计水耗量 = totalWater;
        });
        
        if (this.tableData.length > 0) {
          this.currentData = this.tableData[this.tableData.length - 1];
        }
        
        this.updateCharts();
      }
    }
  };
  </script>
  
  <style scoped lang="scss">
  .app-container.dark-mode {
    padding: 20px;
    background-color: #141414;
    min-height: 100vh;
  }
  
  .dashboard-card {
    background-color: #1e1e1e;
    border-color: #333;
    
    ::v-deep .el-card__header {
      background-color: #1a1a1a;
      border-bottom-color: #333;
      color: #e0e0e0;
    }
    
    .card-title {
      font-size: 18px;
      font-weight: bold;
      color: #e0e0e0;
    }
  }
  
  .filter-form {
    ::v-deep .el-form-item__label {
      color: #999;
    }
    
    ::v-deep .el-input__inner,
    ::v-deep .el-range-input {
      background-color: #2a2a2a;
      border-color: #434343;
      color: #e0e0e0;
    }
    
    ::v-deep .el-range-separator {
      color: #999;
    }
  }
  
  .summary-row {
    margin-bottom: 20px;
    
    .summary-card {
      background-color: #2a2a2a;
      border-radius: 4px;
      padding: 15px;
      text-align: center;
      border: 1px solid #434343;
      
      .summary-title {
        color: #999;
        font-size: 14px;
        margin-bottom: 10px;
      }
      
      .summary-value {
        color: #e0e0e0;
        font-size: 24px;
        font-weight: bold;
      }
    }
  }
  
  .chart-container {
    background-color: #2a2a2a;
    border-radius: 4px;
    padding: 15px;
    border: 1px solid #434343;
    
    .chart-title {
      color: #e0e0e0;
      font-size: 16px;
      margin-bottom: 15px;
      text-align: center;
    }
  }
  
  .dark-table {
    --el-table-border-color: #434343;
    --el-table-border: 1px solid var(--el-table-border-color);
    --el-table-text-color: #e8e8e8;
    --el-table-header-text-color: #f0f0f0;
    --el-table-row-hover-bg-color: #2d2d2d;
    --el-table-current-row-bg-color: #2a2a2a;
    --el-table-header-bg-color: #1d1d1d;
    --el-table-bg-color: #1e1e1e;
    --el-table-tr-bg-color: #1e1e1e;
    --el-table-expanded-cell-bg-color: #1a1a1a;
    
    background-color: var(--el-table-bg-color);
    color: var(--el-table-text-color);
    
    /* 表头 */
    ::v-deep .el-table__header-wrapper {
      th {
        background-color: var(--el-table-header-bg-color);
        color: var(--el-table-header-text-color);
        font-weight: 600;
      }
    }
  
    /* 表格主体 */
    ::v-deep .el-table__body-wrapper {
      tr {
        background-color: var(--el-table-tr-bg-color);
        
        &:hover > td {
          background-color: var(--el-table-row-hover-bg-color) !important;
        }
        
        td {
          border-bottom: var(--el-table-border);
        }
      }
    }
  
    /* 边框线 */
    ::v-deep .el-table--border {
      border: var(--el-table-border);
      
      &::after, &::before {
        background-color: var(--el-table-border-color);
      }
    }
    
    /* 输入框样式 */
    ::v-deep .el-input-number {
      width: 100%;
      
      .el-input__inner {
        background-color: #2a2a2a;
        border-color: #434343;
        color: #e0e0e0;
      }
    }
  }
  </style>